<template>
	<view class="page" style="background-color: #fff;">
		
		<cu-custom bgColor="#fff" :isBack="true" textColor="#000000">
			<block slot="backText">返回</block>
			<block slot="content">岗位详情</block>
		</cu-custom>
		
		<!-- <view class="all_jobs">
			<view class="jobs_item" style="margin-top: 0rpx;">
				<view @click="viewNewsInfo(item.id)">
					<view class="item_name_line">
						<view class="item_name" style="color: #000000;font-weight: bold;font-size: 33rpx;">{{newsDetail.zhaopindataGangwei}}</view>			
					</view>
					<view class="item_some_line">
						<view class="item_wage" style="color: #3694EF;">{{newsDetail.zhaopindataXinzi | filterXinzi}}</view>
					</view>
				</view>
				<view class="item_some_line" style="display:flex;">
					<image class="img-yaoqiu-1" src="../../static/news/wz.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
					<view class="item_wage" style="margin-top: 7rpx;">{{Diqu}}</view>
				</view>
				<view class="split_line"></view>
				<view style="margin-bottom: 15rpx;">
					<uni-row>
						<uni-col :span="6">
							<view>
								<image class="img-yaoqiu-1" src="../../static/news/qz.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
								<text class="txt-yaoqiu-1">{{newsDetail.zhaopindataIsQuanzhi | filterIsQuanzhi}}</text>
							</view>
						</uni-col>
						<uni-col :span="6">
							<view>
								<image class="img-yaoqiu-1" src="../../static/news/rs.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
								<text class="txt-yaoqiu-1">{{newsDetail.zhaopindataRenshu}}人</text>
							</view>	
						</uni-col>
						<uni-col :span="6">
							<view style="margin-left:-26rpx;">
								<image class="img-yaoqiu-1" src="../../static/news/fl.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
								<text class="txt-yaoqiu-1">福利面议</text>
							</view>	
						</uni-col>
						<uni-col :span="6">
							<view>
								<image class="img-yaoqiu-1" src="../../static/news/cz.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
								<text class="txt-yaoqiu-1">{{newsDetail.zhaopindataXueli | filterXueli}}</text>
							</view>	
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="8">
							<image class="img-yaoqiu-1" src="../../static/news/jy.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
							<text class="txt-yaoqiu-1">{{newsDetail.zhaopindataJingyan | filterJingyan}}</text>
						</uni-col>
						<uni-col :span="8">
							<image class="img-yaoqiu-1" src="../../static/news/nl.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
							<text class="txt-yaoqiu-1">{{newsDetail.zhaopindataAge | filterAge}}</text>
						</uni-col>
					</uni-row>
				</view>
			</view>
			<view class="split_line" style="height:10rpx;width:100%;margin-top:-47rpx;"></view>
			<view class="jobs_item">
				<view class="split_line"></view>
				<view class="cdetail-all-wrap" style="width: 98%;">
					<view class="content-title" style="color: #000000;margin-left: 0rpx;font-weight: bold;font-size: 30rpx;">职位描述</view>
					<view class="content-wrap">
						<rich-text class="content" :nodes="newsDetail.zhaopindataGangweiyaoqiu"></rich-text>
					</view>
				</view>
			</view>
			
			<view class="jobs_item" style="padding-bottom: 180rpx;">
				<view class="split_line"></view>
				<view class="cdetail-all-wrap" style="width: 98%;">
					<view class="content-title" style="color: #000000;margin-left: 0rpx;font-weight: bold;font-size: 30rpx;">公司信息</view>
					<view class="content-wrap">
						<view @click="viewNewsInfo(item.id)">
							<view class="item_name_line">
								<view class="item_name">{{newsDetail.zhaopindataQiye}}</view>			
							</view>
							<view class="item_some_line">
								<view class="item_wage" style="font-size: 20rpx;">{{newsDetail.zhaopindataXingzhi}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>				
		</view>
		 -->
		 	<view class="all_jobs">
		 				<view class="jobs_item" style="margin-top: 0rpx;">
		 					<view>
		 						<view class="item_name_line">
		 							<text
		 								style="color: #000000;font-weight: bold;font-size: 33rpx;">{{newsDetail.zhaopindataGangwei}}</text>
		 						</view>
		 						<view class="item_some_line">
		 							<view class="item_wage" style="color: #3694EF;margin-top: 15rpx;">
		 								{{newsDetail.zhaopindataXinzi | filterXinzi}}
		 							</view>
		 						</view>
		 					</view>
		 					<view class="item_some_line location">
		 						<image class="" style="margin-top: 0;" src="../../static/news/news_location.png"></image>
		 						<view class="item_wage"> {{ Diqu }} </view>
		 						<!-- <view class="item_wage"> {{ newsDetail.zhaopindataDiqu.replace(/,/g, ' ') }} </view> -->
		 					</view>
		 					<view class="split_line"></view>
		 					<view style="margin-bottom: 15rpx;" class="yaoqiu-all">
		 						<view class="yaoqiu">
		 							<image class="img-yaoqiu-1" src="../../static/news/news_Quanzhi.png" mode="aspectFill"
		 								style="width: 32rpx;height: 32rpx;"></image>
		 							<text class="txt-yaoqiu-1">{{newsDetail.zhaopindataIsQuanzhi | filterIsQuanzhi}}</text>
		 						</view>
		 						<view class="yaoqiu">
		 							<image class="img-yaoqiu-1" src="../../static/news/news_Renshu.png" mode="aspectFill"
		 								style="width: 32rpx;height: 32rpx;"></image>
		 							<text class="txt-yaoqiu-1">{{newsDetail.zhaopindataRenshu}}人</text>
		 						</view>
		 						<view class="yaoqiu">
		 							<image class="img-yaoqiu-1" src="../../static/news/news_Fuli.png" mode="aspectFill"
		 								style="width: 32rpx;height: 32rpx;"></image>
		 							<text class="txt-yaoqiu-1">五险一金</text>
		 						</view>
		 						<view class="yaoqiu">
		 							<image class="img-yaoqiu-1" src="../../static/news/news_Xueli.png" mode="aspectFill"
		 								style="width: 32rpx;height: 32rpx;"></image>
		 							<text class="txt-yaoqiu-1">{{newsDetail.zhaopindataXueli | filterXueli}}</text>
		 						</view>
		 						<view class="yaoqiu">
		 							<image class="img-yaoqiu-1" src="../../static/news/news_Jingyan.png" mode="aspectFill"
		 								style="width: 32rpx;height: 32rpx;"></image>
		 							<text class="txt-yaoqiu-1">{{newsDetail.zhaopindataJingyan | filterJingyan}}</text>
		 						</view>
		 						<view class="yaoqiu">
		 							<image class="img-yaoqiu-1" src="../../static/news/news_Nianling.png" mode="aspectFill"
		 								style="width: 32rpx;height: 32rpx;" v-show="this.newsDetail.zhaopindataAge"></image>
		 							<text class="txt-yaoqiu-1">{{newsDetail.zhaopindataAge | filterAge}}</text>
		 						</view>
		 					</view>
		 	
		 					<view class="split_line"></view>
		 	
		 					<view class="cdetail-all-wrap" style="width: 98%;">
		 						<!-- <view class="t_bar" style="top: 43rpx;"></view> -->
		 						<view class="content-title" style="color: #000000;margin-left: 0rpx;">职位描述</view>
		 						<view class="content-wrap">
		 							<rich-text class="content" :nodes="newsDetail.zhaopindataGangweiyaoqiu"></rich-text>
		 						</view>
		 					</view>
		 	
		 					<view class="split_line"></view>
		 	
		 					<view class="cdetail-all-wrap" style="width: 98%;">
		 						<!-- <view class="t_bar" style="top: 43rpx;"></view> -->
		 						<view class="content-title" style="color: #000000;margin-left: 0rpx;">公司信息</view>
		 						<view class="content-wrap">
		 							<view @click="viewNewsInfo(item.id)">
		 								<view class="item_name_line">
		 									<view class="item_name">{{newsDetail.zhaopindataQiye}}</view>
		 								</view>
		 								<view class="item_some_line">
		 									<view class="item_wage" style="font-size: 20rpx;">{{newsDetail.zhaopindataXingzhi}}
		 									</view>
		 								</view>
		 							</view>
		 						</view>
		 					</view>
		 				</view>
		 			</view>
		<view style="width: 100%; position: fixed;bottom: 0; background-color: #FFFFFF; border-top:1px #ffffff solid;box-shadow: 0px -10px 10px -5px #f3f3f3;">
			<view class="grid-container" style="padding: 30rpx 20rpx 50rpx 20rpx">
				<!-- inputDialogToggle -->
			  <view class="grid-item" @click="phoneConsult=true">
			    <button type="primary" style="background-color:#E5F0FF;color:#3694EF;width: 90%;">电话咨询</button>
			  </view>
			  <view class="grid-item" @click="viewToNewsBackinfo">
			    <button type="primary" style="background-color:#3694EF;color:#fff;width: 100%;">立即报名</button>
			  </view>
			</view>
			<neil-modal :show="phoneConsult" @close="closeModal()" :show-cancel="false" confirmText="拨打电话" title="咨询电话" 
			:content="data3" confirmColor='#3694ef' align="center" @confirm="clickPhone">
			</neil-modal>
		</view>
	</view>
</template>
<script>
	import uniCol from '@/components/uni-ui/uni-row-col/uni-col/uni-col.vue';
	import uniRow from '@/components/uni-ui/uni-row-col/uni-row/uni-row.vue';
	import uniGrid from '@/components/uni-ui/uni-grid/uni-grid/uni-grid.vue';
	import uniGridItem from '@/components/uni-ui/uni-grid/uni-grid-item/uni-grid-item.vue';
	import neilModal from './neil-modal.vue'
	const app = getApp();
	export default {
		components: {
			uniCol,
			uniRow,
			uniGrid,
			uniGridItem,
			neilModal
		},
		data() {
			return {
				phoneConsult:false,
				data3:app.globalData.aboutPhone,
				//设置默认的分享参数
				share:{
					title:'找工作，不用愁！',
					path:'/pages/news/news',
					imageUrl:'',
					desc:'',
					content:''
				},
				
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				theme: app.globalData.theme.backgroundColor, //全局颜色变量
				
				newsDetail: {},
			}
		},
		filters:{
			filterAge(type){
				switch(type){
					case '0':
						return '18岁~25岁'
						break;
					case '1':
						return '26岁~30岁'
						break;
					case '2':
						return '31岁~35岁'
						break;
					case '3':
						return '36岁~40岁'
						break;
					case '4':
						return '41岁~50岁'
						break;
					case '5':
						return '50岁以上'
						break;
				}
			},
			filterXinzi(type){
				switch(type){
					case '0':
						return '面议'
						break;
					case '1':
						return '1000~1500/月'
						break;
					case '2':
						return '1500~2000/月'
						break;
					case '3':
						return '2000~3000/月'
						break;
					case '4':
						return '3000~5000/月'
						break;
					case '5':
						return '5000以上/月'
						break;
				}
			},
			filterJingyan(type){
				switch(type){
					case '0':
						return '无经验'
						break;
					case '1':
						return '1年以下'
						break;
					case '2':
						return '1~3年'
						break;
					case '3':
						return '3~5年'
						break;
					case '4':
						return '5年以上'
						break;
				}
			},
			filterXueli(type){
				switch(type){
					case '0':
						return '初中'
						break;
					case '1':
						return '高中'
						break;
					case '2':
						return '中技/中专'
						break;
					case '3':
						return '大专'
						break;
					case '4':
						return '本科'
						break;
					case '5':
						return '硕士'
						break;
				}
			},
			filterIsQuanzhi(type){
				switch(type){
					case '0':
						return '全职'
						break;
					case '1':
						return '兼职'
						break;
				}
			},
		},
		onLoad(option) {
			this.getNewsInfo(option.zhaopindata_id);
		},
			computed: {
			Diqu:function() {
				if (JSON.stringify(this.newsDetail) === "{}")
					return ""
				else
					return this.newsDetail.zhaopindataDiqu.replace(/,/g, ' ')
			}
		},
		methods: {
			clickPhone() {
				uni.makePhoneCall({
					phoneNumber: app.globalData.aboutPhone,  // 手机号
					success: (res) => {
						console.log('调用成功!')	
					},
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
				
			closeModal(){
				this.phoneConsult = false;
			},
			// 获得详情数据
			getNewsInfo(zhaopindataId) {
				uni.request({
					url: app.globalData.serve_job_url + zhaopindataId,
					method: 'GET',
					data: {
					},
					success: res => {
						this.newsDetail = res.data.data;
					},
				});
			},
			// 资讯电话
			inputDialogToggle() {
				this.phoneConsult=true;
				uni.showModal({
					title: '咨询电话',
					content: app.globalData.aboutPhone,
					showCancel: false,
					confirmText:'拨打电话',
					confirmColor:'#3694ef',
					success: (res) => {
						if(res.confirm) {  
						
							uni.makePhoneCall({
								phoneNumber: app.globalData.aboutPhone,  // 手机号
								success: (res) => {
									console.log('调用成功!')	
								},
								fail: (res) => {
									console.log('调用失败!')
								}
							});
							
						}
					} 
				})
			},
			// 跳转立即报名页面
			viewToNewsBackinfo() {
				uni.navigateTo({
					url: './news-backinfo?zhaopindataId=' + this.newsDetail.zhaopindataId + '&zhaopindataGangwei=' + this.newsDetail.zhaopindataGangwei,
				});
			},
		}
	}
</script>
<style lang="scss">
	
		page {
			background-color: #fff;
		}
	.t_bar {
		position: absolute;
		left: 25rpx;
		-webkit-transform: translate(0, -50%);
		transform: translate(0, -50%);
		width: 7rpx;
		height: 30rpx;
		background: #1787fb;
	}
	.content-wrap{
		margin-top: 20rpx;
		margin-left: 0rpx !important;
	}
	.text {
		font-size: 14px;
		margin-top: 5px;
	}
	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
	.txt-yaoqiu-1{
		margin-left: 10rpx;
	}
	.img-yaoqiu-1{
		position: relative;
		top: 10rpx;
	}
	.all_jobs{
		width: 100%;
		border-top: #e2e2e2 thin solid;
	}
	.jobs_item{
		position: relative;
		width: 100%;
		background: #FFFFFF;
		// margin-top: 12rpx;
		padding: 20rpx 35rpx 18rpx 35rpx;
	}
	.all_jobs .jobs_item .item_name_line {
		position: relative;
		height: 55rpx;
		line-height: 55rpx;
	}
	.all_jobs .jobs_item .item_name_line .item_name{
		display: block;
		float: left;
		height: 45rpx;
		line-height: 45rpx;
		text-decoration: none;
		color: #333333;
		font-size: 33rpx;
	}
	.all_jobs .jobs_item .item_name_line .item_wage{
			position: absolute;
			right: 2rpx;
			top: 50%;
			-webkit-transform: translate(0, -50%);
			transform: translate(0, -50%);
			color: #ffaf24;
			line-height: normal;
			font-size: 25rpx;
	}
	.all_jobs .jobs_item .item_some_line{
		position: relative;
		height: 55rpx;
		line-height: 55rpx;
		margin-bottom: 10rpx;
	}
	.all_jobs .jobs_item .item_some_line .item_some{
		height: 45rpx;
		line-height: 45rpx;
		color: #666666;
		font-size: 27rpx;
	}  
	.all_jobs .jobs_item .item_some_line .item_date{
			position: absolute;
			right: 2rpx;
			top: 0;
			height: 45rpx;
			line-height:45rpx;
			color: #999999;
			font-size: 23rpx;
	}
	.all_jobs .jobs_item .split_line{
		width: 100%;
		border-bottom: 2rpx solid #e2e2e2;
		margin: 10rpx 0rpx 20rpx 0rpx;
	}
	.grid-container {
	  display: flex;
	  justify-content: space-between;
	}
	
	.grid-item {
	  flex: 1;
	}
	.grid-item:nth-child(1) {
		width: 40%;
		flex-shrink: 1;
		flex-wrap: 0;
		flex: none;
	}
	.button {
			align-items: center;
			justify-content: center;
			flex: 1;
			height: 35px;
			margin: 0 5px;
			border-radius: 5px;
		}
	
		// .t_bar {
		// 	position: absolute;
		// 	left: 25rpx;
		// 	-webkit-transform: translate(0, -50%);
		// 	transform: translate(0, -50%);
		// 	width: 7rpx;
		// 	height: 30rpx;
		// 	background: #1787fb;
		// }
		.content-wrap {
			margin-top: 20rpx;
			margin-left: 0rpx !important;
		}
	
		.text {
			font-size: 14px;
			margin-top: 5px;
		}
	
		.grid-item-box {
			flex: 1;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
		}
	
		.flex-item-box {
			display: flex;
			align-items: center;
		}
	
		.bottom-content {
			width: 100%;
			height: calc(env(safe-area-inset-bottom) + 90rpx);
			background-color: #FDFDFD;
			position: fixed;
			bottom: 0rpx;
			border-bottom: 2rpx solid #F5F5F5;
			box-shadow: 0px -15rpx 20rpx -10rpx #f4f4f4;
			padding: 0 15rpx;
		}
	
		.bottom-view {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	
		.bottom-button {
			width: 100%;
			border: 0;
			display: flex;
			flex-direction: column;
			padding: 0;
			margin: 0;
			justify-content: center;
			background-color: #FDFDFD;
			align-items: center;
		}
	
		.bottom-button::after {
			border: none;
		}
	
		.content1 {
			width: 150rpx;
		}
	
		.content2 {
			width: 100%;
			margin: 0 20rpx;
		}
	
		// .txt-yaoqiu-1 {
		// 	margin-left: 10rpx;
		// }
	
		.img-yaoqiu-1 {
			position: relative;
			// top: 10rpx;
		}
	
		.all_jobs {
			width: 100%;
			border-top: #e2e2e2 thin solid;
			padding-bottom: 150rpx;
		}
	
		.jobs_item {
			position: relative;
			width: 100%;
			background: #FFFFFF;
			margin-top: 12rpx;
			padding: 20rpx 35rpx 18rpx 35rpx;
		}
	
		.all_jobs .jobs_item .item_name_line {
			position: relative;
			height: 55rpx;
			line-height: 55rpx;
		}
	
		.all_jobs .jobs_item .item_name_line .item_name {
			display: block;
			float: left;
			height: 45rpx;
			line-height: 45rpx;
			text-decoration: none;
			color: #333333;
			font-size: 32rpx;
		}
	
		.all_jobs .jobs_item .item_name_line .item_wage {
			position: absolute;
			right: 2rpx;
			top: 50%;
			-webkit-transform: translate(0, -50%);
			transform: translate(0, -50%);
			color: #ffaf24;
			line-height: normal;
			font-size: 25rpx;
		}
	
		.all_jobs .jobs_item .item_some_line {
			position: relative;
			height: 55rpx;
			line-height: 55rpx;
			margin-bottom: 10rpx;
		}
	
		.all_jobs .jobs_item .item_some_line .item_some {
			height: 45rpx;
			line-height: 45rpx;
			color: #666666;
			font-size: 27rpx;
		}
	
		.all_jobs .jobs_item .item_some_line .item_date {
			position: absolute;
			right: 2rpx;
			top: 0;
			height: 45rpx;
			line-height: 45rpx;
			color: #999999;
			font-size: 23rpx;
		}
	
		.location {
			display: flex;
			align-items: center;
		}
	
		.location image,
		.yaoqiu image {
			margin-right: 10rpx;
			width: 32rpx;
			height: 32rpx;
			margin-top: -16rpx;
		}
	
		.yaoqiu-all {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			vertical-align: middle;
		}
	
		.yaoqiu {
			display: flex;
			margin-right: 35rpx;
			align-items: center;
			vertical-align: middle;
		}
	
		.all_jobs .jobs_item .split_line {
			width: 100%;
			border-bottom: 1rpx solid #e2e2e2;
			margin: 10rpx 0rpx 20rpx 0rpx;
		}
		.txt-yaoqiu-1 {
		    margin-left: 10rpx;
		    margin-top: 10rpx;
		    box-sizing: border-box;
		}
</style>